<template>
	<div class="resultContainer">
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<van-cell 
			 v-for="(item,index) in resultList" 
			 :key="index" 
			 :title="item.title" 
			 />
		</van-list>
	</div>
</template>

<script>
	import {getSearchResult} from '@/api/search.js'
	export default {
		name: "result",
		props:{
			q:{
				type:String,
				required:true
			}
		},
		data() {
			return {
				resultList: [],
				loading: false,
				finished: false,
				page:1,
				per_page:10	
			}
		},
		methods:{
			async onLoad() {
				const {data} = await getSearchResult({
					page:this.page,
					per_page:this.per_page,
					q:this.q
				})
				const result = data.data.results
				this.resultList.push(...this.resultList,...result)
				this.loading=false
				
				if(result.length){
					this.page++
				}else{
					this.finished=true
				}

			}     
		}
	}
</script>

<style scoped lang="less">
	.resultContainer{
		position:absolute;
		top:54px;
		left:0;
		right:0;
		bottom:0;
	}
</style>
